import './Home.less';
import stores from '../../mobx'
import { SwapOutlined, FireTwoTone, RightOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react';
import Conversion from '../../components/home/Conversion';
import ProgressC1 from '../../components/home/ProgressC1';
import ProgressC2 from '../../components/home/ProgressC2';
import ProgressC3 from '../../components/home/ProgressC2';
import BarChart from '../../components/home/BarChart';
import { Button, Row, Col, } from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import FunnelChart from '../../components/home/Funnel';
import QueueAnim from 'rc-queue-anim';

// import * as dayjs from 'dayjs'

const Home = () => {
    console.log(stores.homeMobx.a);
    return (
        <div className="big-card-index">
            <div className="card-header">
                <h2>首页</h2>
            </div>
            <div className="home-detail">
                <QueueAnim animConfig={[
                    { opacity: [1, 0], translateY: [0, 50] },
                    { opacity: [1, 0], translateY: [0, -50] }
                ]}>

                    <Row gutter={[3, 3]} key="anim1" className="top-card">
                        <Col span={6}>
                            <div className="sales-today-card">
                                <p className="top-card-title">今日销售额/元</p>
                                <p className="top-card-data">8,987.00</p>
                                <div className="top-card-chaets">
                                    <div className="card-chaets-left">
                                        <div className="chaets-left-top"><span><SwapOutlined />&nbsp;下单转化率</span></div>
                                        <div className="chaets-left-bottom"><span>68%</span><span>本周 36%</span></div>
                                    </div>
                                    <div className="card-chaets-right">
                                        <Conversion />
                                        <div className="chart-icon">
                                            <SwapOutlined />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="sales-total-card">
                                <p className="top-card-title">累计销售额/元</p>
                                <p className="top-card-data">17,128.00</p>
                                <div className="top-progress-bar">
                                    <div className="progress-bar">
                                        <ProgressC1 />
                                    </div>
                                    <div className="hot-icon">
                                        <FireTwoTone twoToneColor="#ff5a78" />
                                    </div>
                                </div>
                                <div className="top-detail-top">
                                    <p><span>最高销售店铺金额：</span><span>￥8879.00</span></p>
                                    <p>占比21.6%</p>
                                </div>
                                <div className="top-detail-bottom">
                                    <div className="detail-bottom-left">
                                        <div className="hg-icon" />
                                        <span>NO1:</span>
                                        <span>就想卖火柴</span>
                                    </div>
                                    <div className="detail-bottom-right">
                                        <Button type="primary" block size="small">
                                            <SwapRightOutlined />
                                        </Button>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="nstore-today-card">
                                <p className="top-card-title">今日新注册店铺数</p>
                                <p className="top-card-data">78</p>
                                <div className="top-progress-bar">
                                    <div className="progress-bar">
                                        <ProgressC2 />
                                    </div>
                                </div>
                                <div className="top-detail-top">
                                    <p><span>线上付款：</span><span>50</span></p>
                                    <p><span>线下核销：</span><span>28</span></p>
                                </div>
                                <div className="top-detail-bottom">
                                    <div className="detail-bottom-left">
                                        <span>今日访问店铺数：</span>
                                        <span>54</span>
                                    </div>
                                </div>
                                <div className="ss-icon" />
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="store-total-card">
                                <p className="top-card-title">累计注册店铺数</p>
                                <p className="top-card-data">2,065</p>
                                <div className="top-progress-bar">
                                    <div className="progress-bar">
                                        <ProgressC3 />
                                    </div>
                                </div>
                                <div className="top-detail-top">
                                    <p><span>线上付款：</span><span>1864</span></p>
                                    <p><span>线下核销：</span><span>201</span></p>
                                </div>
                                <div className="top-detail-bottom">
                                    <div className="detail-bottom-left">
                                        <span>活跃店铺访问天数：</span>
                                        <span>54</span>
                                    </div>
                                    <p><span>NO1：</span><span>就想卖火柴</span></p>
                                </div>
                                <div className="ss-icon" />
                            </div>
                        </Col>
                    </Row>

                    <Row key="anim2" className="bottom-card" gutter={[3, 3]}>
                        <Col span={12}>
                            <div className="bottom-card-left">
                                <p className="bar-chart-title">销售数据</p>
                                <div className="bar-chart">
                                    <BarChart />
                                </div>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="bottom-card-middle">
                                <p className="funnel-chart-title">店铺数据详情</p>
                                <div className="funnel-chart">
                                    <FunnelChart />
                                </div>
                                <div className="grid-chart">
                                    <div className="grid-one">
                                        <p>无下级店铺数</p>
                                        <p>1257</p>
                                    </div>
                                    <div className="grid-two">
                                        <p>无下级占比/%</p>
                                        <p>23%</p>
                                    </div>
                                    <div className="grid-three">
                                        <p>最高下级数</p>
                                        <p>54</p>
                                        <div><span>NO1：</span><span>就想卖火柴</span></div>
                                    </div>
                                    <div className="grid-four">
                                        <p>最高全网数</p>
                                        <p>541</p>
                                        <div><span>NO1：</span><span>就想卖火柴</span></div>
                                    </div>
                                    <div className="line-icon1" />
                                    <div className="line-icon2" />
                                </div>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="bottom-card-right">
                                <div className="last-card-top">
                                    <p className="last-card-title">商品各类数据最高榜单</p>
                                    <div className="last-big-pop">
                                        <p>7,987.00</p>
                                    </div>
                                    <div className="last-sm-pop">
                                        <div className="sm-item">
                                            <p>575</p>
                                        </div>
                                        <div className="sm-item">
                                            <p>32%</p>
                                        </div>
                                    </div>
                                    <div className="last-top-bg" />
                                    <div className="last-title">
                                        <p>分享次数</p>
                                        <p>累计销售额</p>
                                        <p>转化率</p>
                                    </div>
                                </div>
                                <div className="last-card-bottom">
                                    <div className="card-list">
                                        <div className="list-icon">

                                        </div>
                                        <div className="list-title">
                                            <p>销售榜单</p>
                                        </div>
                                        <div className="list-data">
                                            <div className="data-item" />
                                            <div className="data-item" />
                                            <div className="data-item" />
                                        </div>
                                        <div className="list-right-icon">
                                            <RightOutlined />
                                        </div>
                                    </div>
                                    <div className="card-list">
                                        <div className="list-icon"></div>
                                        <div className="list-title">
                                            <p>分享榜单</p>
                                        </div>
                                        <div className="list-data">
                                            <div className="data-item" />
                                            <div className="data-item" />
                                            <div className="data-item" />
                                        </div>
                                        <div className="list-right-icon">
                                            <RightOutlined />
                                        </div>
                                    </div>
                                    <div className="card-list">
                                        <div className="list-icon"></div>
                                        <div className="list-title">
                                            <p>转化率榜单</p>
                                        </div>
                                        <div className="list-data">
                                            <div className="data-item" />
                                            <div className="data-item" />
                                            <div className="data-item" />
                                        </div>
                                        <div className="list-right-icon">
                                            <RightOutlined />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>





                </QueueAnim>
            </div>
        </div>
    );
}

export default observer(Home);